<template>
  <div
    class="app"
    :class="{
      'theme-dark': appStore.themeDark,
      'theme-light': !appStore.themeDark,
      hidden: appStore.isShowLoginInput,
    }"
  >
    <Banner />
    <Header></Header>
    <div class="container">
      <router-view v-slot="{ Component }">
        <transition mode="out-in" name="router">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
    <Navigation />
    <WxDialog />
    <Mask v-if="appStore.isShowLoginInput" />
    <transition name="login" mode="out-in">
      <LoginDIalog v-if="appStore.isShowLoginInput" />
    </transition>
    <AirBubble v-show="appStore.isShowAirBubble" />
    <Mask v-if="appStore.isShowProfile" />
    <Profile v-if="appStore.isShowProfile" />
    <Dia />
  </div>
</template>

<script setup>
  import { onBeforeMount } from 'vue'
  import Banner from './components/Banner.vue'
  import Header from './components/Header.vue'
  import Navigation from './components/Navigation.vue'
  import WxDialog from '@/components/WxDialog.vue'
  import AirBubble from './components/AirBubble.vue'
  import Mask from '@/components/Mask.vue'
  import LoginDIalog from './components/LoginDIalog.vue'
  import Profile from './views/user/Profile.vue'
  import useAppStore from './store/appStore'
  import Dia from './components/Dia.vue'
  import exposure from '@/utils/observer'
  import Device from '@skillnull/device-js'
  import { sendPageViewRequest } from '@/network/api/point'
  const appStore = useAppStore()

  onBeforeMount(async () => {
    const data = await Device.Info({
      info: [
        'deviceType',
        'OS',
        'OSVersion',
        'OSVersion',
        'screenWidth',
        'screenHeight',
        'browserInfo',
        'UUID',
      ],
    })
    // 发送pv
    await sendPageViewRequest(data)
  })
  // 关闭页面之前
  document.addEventListener('visibilitychange', function logData() {
    if (document.visibilityState === 'hidden') {
      // 发送文章浏览量和曝光
      exposure.beforeUnmount()
    }
  })
</script>

<style lang="less" scoped>
  .app {
    background: var(--background-primary);
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 1080px;
    .container {
      position: relative;
      z-index: 100;
      margin: 0 auto;
      width: 90%;
      color: var(--text-normal);
    }
  }
</style>
